<!-- 使用说明：
<search @searchVal="getSearchVal" placeholder="请输入门店名称"></search>

import search from '@/components/baseComponents/search/index.vue';
export default {
	components: { search },
	data() {
		return {
			inputVal: ''
		};
	},
	methods: {
		getSearchVal(e) {
			this.inputVal = e;
		}
	}
}; -->

<template>
	<view class="box">
		<view class="lef">
			<view class="iconfont icon-sousuo1"></view>
			<view class="input"><input v-model="value" :placeholder="placeholder"></input> </view>
		</view>
		<view class="rig">
			<view class="line">|</view>
			<view class="btn" @click="subVal">搜索</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:['placeholder'],
		data() {
			return{
				value:''
			}
		},
		methods:{
			subVal(){
				this.$emit('searchVal',this.value)
			}
		}
	}
</script>

<style lang="scss" scoped>
.box {
	width: 702rpx;
	height: 80rpx;
	border: 1rpx solid #e0e0e0;
	border-radius: 8rpx;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	.lef{
		display: flex;
		flex: 4;
		justify-content: flex-start;
		align-items: center;
		font-size: 29rpx;
		font-weight: 500;
		color: #888888;
		.iconfont{
			margin: 0 14rpx;
		}
		.input{
			width: 100%;
		}
	}
	.rig{
		display: flex;
		flex: 1;
		align-items: center;
		font-weight: 500;
		.line{
			color: #888888;
			font-size: 29rpx;
			margin: 0 24rpx;
		}
		.btn{
			font-size: 29rpx;
			color: #FFB72F;
		}
	}
}
</style>
